<template>
    <div class="theme-examples-controls">
      <div class="example-container">
        <label class="color-select">
          <select id="themeSelect" @change="changeTheme">
            <option value="ht-theme-main">Main Light</option>
            <option value="ht-theme-horizon">Horizon Light</option>
            <option value="ht-theme-main-dark">Main Dark</option>
            <option value="ht-theme-horizon-dark">Horizon Dark</option>
            <option value="ht-no-theme">No theme</option>
          </select>
          <div id="colorBox" class="color-box">
            <span class="color" style="background: var(--ht-foreground-color, #000);"></span>
            <span class="color" style="background: var(--ht-background-color, #fff);"></span>
            <span class="color" style="background: var(--ht-accent-color, #4f7fff);"></span>
          </div>
        </label>
      </div>
    </div>
    </template>
    
    <script setup lang="ts">
    import { ref } from 'vue';
    
    const theme = ref('ht-theme-main');
    
    const changeTheme = (event: Event) => {
      const selectedTheme = (event.target as HTMLSelectElement).value;
      theme.value = selectedTheme;
    };
    </script>
    
    <style scoped lang="less">
    .theme-examples-controls .example-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .theme-examples-controls .color-select {
        position: relative;
        display: inline-flex;
        gap: 10px;
    }
    
    .theme-examples-controls .color-select:after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        right: 20px;
    }
    
    .theme-examples-controls .color-select select {
        padding: 8px 70px 8px 16px;
        border-radius: 8px;
        appearance: none;
    }
    
    .theme-examples-controls .color-box {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 4px;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        border-radius: 12px;
        background: grey;
        padding: 5px;
        pointer-events: none;
    }
    
    .theme-examples-controls .color-box .color {
        width: 10px;
        height: 10px;
        background-color: grey;
        border-radius: 50%;
        border: 1px solid grey;
    }
    
    .color-box {
        display: flex;
        gap: 4px;
        padding: 5px;
        background: #f0f0f0;
        border-radius: 4px;
        
        .color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #ddd;
            display: block;
        }
    }
    </style>